<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>轮播效果 &middot; Bootstrap</title>
<!-- Bootstrap 核心CSS -->
<link href="../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../assets/css/docsearch.min.css" rel="stylesheet">
<link href="../assets/css/docs.min.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link rel="apple-touch-icon" href="../assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="../assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="../assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
  
<link rel="mask-icon" href="../assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="../favicon.ico">
<meta name="msapplication-config" content="../assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

<!-- Twitter -->
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Introduction">
<meta name="twitter:description" content="轮播效果 Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
<meta name="twitter:image" content="../assets/brand/bootstrap-social.png">

<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
<meta property="og:title" content="Introduction">
<meta property="og:description" content="轮播效果 Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
<meta property="og:type" content="website">
<meta property="og:image" content="../assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="../assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../index.html" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../index.html">首页</a></li>
      <li class="nav-item"><a class="nav-link active" href="../docs/index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link " href="../examples/index.html">实例</a></li>
      
      
      
      
    </ul>
  </div>
  
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="../components/download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      


<nav class="collapse bd-links" id="bd-docs-nav">
  <div class="bd-toc-item"> <a class="bd-toc-link" href="../docs/index.html"> 快速入门 </a>
    <ul class="nav bd-sidenav">
    <li><a href="../docs/index.html">关于</a></li>
    <li><a href="../docs/download.html">下载</a></li>
    <li><a href="../docs/contents.html">目录结构</a></li>
    <li><a href="../docs/browsers-devices.html">浏览器与设备调优</a></li>
    <li><a href="../docs/javascript.html">JavaScript脚本</a></li>
    <li><a href="../docs/theming.html">主题化</a></li>
    <li><a href="../docs/build-tools.html">编译工具</a></li>
    <li><a href="../docs/webpack.html"> Webpack模块化</a></li>
    <li><a href="../docs/accessibility.html">无障碍浏览</a></li>
    </ul>
  </div>
  <div class="bd-toc-item"> <a class="bd-toc-link" href="../layout/overview.html"> 布局 </a>
    <ul class="nav bd-sidenav">
    <li><a href="../layout/overview.html">概述</a></li>
    <li><a href="../layout/media-object.html">媒体对象</a></li>
    <li><a href="../layout/utilities-for-layout.html"> 布局实施建议 </a> </li>
    </ul>
  </div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../content/reboot.html">内容 </a>
  <ul class="nav bd-sidenav">
    <li><a href="../content/reboot.html"> 初始化与CSS重置 </a> </li>
    <li><a href="../content/typography.html"> 排版 </a> </li>
    <li><a href="../content/code.html"> 代码 </a> </li>
    <li><a href="../content/images.html"> 图片 </a> </li>
    <li><a href="../content/tables.html"> 表格 </a> </li>
    <li><a href="../content/figures.html"> 图文框 </a> </li>
  </ul>
</div>
<div class="bd-toc-item active"> <a class="bd-toc-link" href="alerts.html"> 组件 </a>
   <ul class="nav bd-sidenav">
    <li><a href="alerts.html"> 警告提示框(Alerts) </a> </li>
    <li><a href="badge.html"> 徽章(Badge) </a> </li>
    <li><a href="breadcrumb.html"> 面包屑导航(Breadcrumb) </a> </li>
    <li><a href="buttons.html"> 按钮(Button) </a> </li>
    <li><a href="button-group.html"> 按钮组(Button-group) </a> </li>
    <li><a href="card.html"> 卡片(Card) </a> </li>
    <li class="active bd-sidenav-active"><a href="carousel.html">  轮播效果(Carousell) </a> </li>
    <li><a href="collapse.html"> 折叠面板(Collapse) </a> </li>
    <li><a href="dropdowns.html"> 下拉菜单(Dropdown) </a> </li>
    <li><a href="forms.html"> 表单(Form) </a> </li>
    <li><a href="input-group.html"> 输入框(Input-group) </a> </li>
    <li><a href="jumbotron.html"> Hero大块屏(Jumbotron) </a> </li>
    <li><a href="list-group.html"> 列表组(List-group) </a> </li>
    <li><a href="media-object.html"> 媒体对象/图文混排(Media-object) </a> </li>
    <li><a href="modal.html"> 弹出模态框(Modal) </a> </li>
    <li><a href="navs.html"> 导航/滑动门(Navs) </a> </li>
    <li><a href="navbar.html"> 导航栏(Navbar) </a> </li>
    <li><a href="pagination.html"> 分页(Pagination) </a> </li>
    <li><a href="popovers.html"> POP提示(Popover) </a> </li>
    <li><a href="progress.html"> 进度条(Progress) </a> </li>
    <li><a href="scrollspy.html"> 滚动监听(Scrollspy) </a> </li>
    <li><a href="spinners.html"> 旋转特效(Spinners) </a> </li>
    <li><a href="toasts.html"> 弹出提示框(Toasts) </a> </li>
    <li><a href="tooltips.html"> 提示冒泡(Tooltip) </a> </li>
</ul>
</div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../utilities/borders.html"> 公共样式 </a>
  <ul class="nav bd-sidenav">
    <li><a href="../utilities/borders.html"> 边框(border) </a> </li>
    <li><a href="../utilities/clearfix.html"> 清动浮动(clearfix) </a> </li>
    <li><a href="../utilities/close-icon.html"> 关闭图标(close icon) </a> </li>
    <li><a href="../utilities/colors.html"> 颜色(color) </a> </li>
    <li><a href="../utilities/display.html"> Display显示属性 </a> </li>
    <li><a href="../utilities/embed.html"> 嵌入(embed) </a> </li>
    <li><a href="../utilities/flex.html"> Flex弹性布局 </a> </li>
    <li><a href="../utilities/float.html"> Float浮动属性 </a> </li>
    <li><a href="../utilities/image-replacement.html"> 图像替换 </a> </li>
	<li><a href="../utilities/overflow.html"> 溢出 </a> </li>
    <li><a href="../utilities/position.html"> Position固顶(底)及定位 </a> </li>
    <li><a href="../utilities/screenreaders.html"> 读屏器 (Screenreaders)</a></li>
    <li><a href="../utilities/shadows.html"> 阴影(shadows)</a></li>
    <li><a href="../utilities/sizing.html"> 规格(sizi)</a></li>
    <li><a href="../utilities/spacing.html"> 间隔(spacing) </a> </li>
    <li><a href="../utilities/text.html"> 文本处理 </a> </li>
    <li><a href="../utilities/vertical-align.html"> 垂直对齐(vertical align) </a> </li>
    <li><a href="../utilities/visibility.html"> Visibility显示或隐藏(能见度)处理 </a> </li>
  </ul>
</div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../extend/approach.html"> 延伸 </a>
  <ul class="nav bd-sidenav">
	<li> <a href="../extend/approach.html"> 方法论 </a> </li>
    <li><a href="../extend/icons.html"> 图标 </a> </li>
  </ul>
</div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../migration/index.html"> 迁移 </a>
  <ul class="nav bd-sidenav">
  </ul>
</div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../about/history.html"> 关于 </a>
  <ul class="nav bd-sidenav">
    <li> <a href="../about/history.html"> 成长历史 </a> </li>
    <li> <a href="../about/team.html"> 项目团队 </a> </li>
    <li> <a href="../about/brand.html"> 品牌标志 </a> </li>
    <li> <a href="../about/license.html"> 许可授权 </a> </li>
    <li> <a href="../about/translations.html"> 翻译 </a> </li>
  </ul>
</div>
</nav>
</div>


<div class="d-none d-xl-block col-xl-2 bd-toc">
  <ul class="section-nav">
    <li class="toc-entry toc-h2"><a href="#how-it-works">工作原理</a></li>
    <li class="toc-entry toc-h2"><a href="#example">示例</a>
      <ul>
        <li class="toc-entry toc-h3"><a href="#slides-only">经典幻灯片效果</a></li>
        <li class="toc-entry toc-h3"><a href="#with-controls">带控制器的效果</a></li>
        <li class="toc-entry toc-h3"><a href="#with-indicators">包含状态指示器</a>
		   <li class="toc-entry toc-h3"><a href="#with-captions">包含字幕的轮播</a></li>
		<li class="toc-entry toc-h3"><a href="#crossfade">交替变化</a></li>
		<li class="toc-entry toc-h3"><a href="#individual-carousel-item-interval">单个 .carousel-item 间隔</a></li>
          <ul>
          </ul>
        </li>
     
      </ul>
    </li>
    <li class="toc-entry toc-h2"><a href="#usage">用法</a>
      <ul>
        <li class="toc-entry toc-h3"><a href="#via-data-attributes">通过数据属性</a></li>
        <li class="toc-entry toc-h3"><a href="#via-javascript">通过 JavaScript</a></li>
        <li class="toc-entry toc-h3"><a href="#options">选项</a></li>
        <li class="toc-entry toc-h3"><a href="#methods">方法</a>
          <ul>
            <li class="toc-entry toc-h4"><a href="#carouseloptions">.carousel(options)-左右控制</a></li>
            <li class="toc-entry toc-h4"><a href="#carouselcycle">.carousel('cycle')-左右控制</a></li>
            <li class="toc-entry toc-h4"><a href="#carouselpause">.carousel('pause')-停止</a></li>
            <li class="toc-entry toc-h4"><a href="#carouselnumber">.carousel(number)-指定</a></li>
            <li class="toc-entry toc-h4"><a href="#carouselprev">.carousel('prev')-前一个目标</a></li>
            <li class="toc-entry toc-h4"><a href="#carouselnext">.carousel('next')-下一个目标</a></li>
			<li class="toc-entry toc-h3"><a href="#carouseldispose">.carousel('dispose')-销毁</a></li>
          </ul>
        </li>
        <li class="toc-entry toc-h3"><a href="#events">事件</a></li>
		<li class="toc-entry toc-h3"><a href="#change-transition-duration">更改转换时间</a></li>
      </ul>
    </li>
  </ul>
</div>
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
  <h1 class="bd-title" id="content">轮播效果(Carousel)</h1>
  <p class="bd-lead">这是一个循环滚动的幻灯片组件，可以使用文本、图象水平不间断滚动，如同<strong>旋转木马</strong>一般。</p>
   
  <h2 id="how-it-works">工作原理</h2>
  <p>轮播效果是一个幻灯片效果，使用CSS 3D变形转换和一些JAvaScript构建一内容循环播放，它适用于一系列图像、文本或自定义标记，还包括对上一个/下一个图的浏览控制和指令支持。</p>
  <p>在支持 <a href="https://www.w3.org/TR/page-visibility/">Page Visibility API（页面可见性）</a>的浏览器中，当网页对用户不可见时（如浏览器选项卡处于非活动状态、窗口最小化时），轮播效果控件会停止运动，从而节省性能。</p>
  <div class="bd-callout bd-callout-info">
<p>此组件的动画效果取决于<code class="highlighter-rouge">prefers-reduced-motion</code> 媒体查询. 请参阅我们的 <a href="https://code.z01.com/docs/4.3/getting-started/accessibility/#reduced-motion">辅助功能文档的简化动作部分</a>.</p>
</div>
  <p>轮播组件不支持互相嵌套-本身轮播大多不符合无障碍浏览的标准。</p>
  <p>最后，如果你要自行编译构建JS，记得 <a href="https://code.z01.com/docs/4.0/getting-started/javascript/#util">需要 <code class="highlighter-rouge">util.js</code></a>。</p>
  <h2 id="example">示例</h2>
  <p>轮播不带幻灯片尺寸标准化处理，因此你可能需要使用其它通用样式可自定义样式来调整其大小使之适当匹配。虽然轮播组件支持上一个/下一个控制和指令，但它们不是必备元素，可根据你的需要添加或自定义（展现不同的效果）。</p>
  <p>通过 <code class="highlighter-rouge">.carousel</code> 命名样式引入轮播组件，同时为此控件设置唯的ID-尤其是当你在同一页面使用多个轮播效果时这是必须的。</p>
  <div class="bd-callout bd-callout-danger">

    <p>在官方实例中，图片是作为显式<img>标签插入在，但大多数的应用场景推荐站长使用背景background方式置入图片，这样可以让web亲和度更高，并容纳更多的文字展示，效果可见 <a href="http://gongyi.z01.com/" target="_blank"><i class="zi zi_externalLinkalt"></i> gongyi.z01.com</a>。-译者注</p>
   
  </div>
  
  <h3 id="slides-only">经典幻灯片效果</h3>
  <p>这是一个经典的幻灯片示例，请注意轮播上的图像引用了 <code class="highlighter-rouge">.d-block</code> 、 <code class="highlighter-rouge">.w-100</code>两个样式，以修正浏览器预设的图像对齐带来的影响。</p>


<div class="bd-example">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect fill="#777" width="100%" height="100%" /><text fill="#555" dy=".3em" x="50%" y="50%">First slide</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect fill="#666" width="100%" height="100%" /><text fill="#444" dy=".3em" x="50%" y="50%">Second slide</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect fill="#555" width="100%" height="100%" /><text fill="#333" dy=".3em" x="50%" y="50%">Third slide</text></svg>
    </div>
  </div>
</div>
</div>


<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"carouselExampleSlidesOnly"</span> <span class="na">class=</span><span class="s">"carousel slide"</span> <span class="na">data-ride=</span><span class="s">"carousel"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-inner"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-item active"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>


  <h3 id="with-controls">带控制器的效果</h3>
  <p>加上了上一个/下一个控制器:</p>
  
  
<div class="bd-example">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect fill="#777" width="100%" height="100%" /><text fill="#555" dy=".3em" x="50%" y="50%">First slide</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect fill="#666" width="100%" height="100%" /><text fill="#444" dy=".3em" x="50%" y="50%">Second slide</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect fill="#555" width="100%" height="100%" /><text fill="#333" dy=".3em" x="50%" y="50%">Third slide</text></svg>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"carouselExampleControls"</span> <span class="na">class=</span><span class="s">"carousel slide"</span> <span class="na">data-ride=</span><span class="s">"carousel"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-inner"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-item active"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://code.z01.com/img/2016instbg_01.jpg"</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://code.z01.com/img/2016instbg_02.jpg"</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://code.z01.com/img/2016instbg_03.jpg"</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"carousel-control-prev"</span> <span class="na">href=</span><span class="s">"#carouselExampleControls"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"prev"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"carousel-control-prev-icon"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Previous<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"carousel-control-next"</span> <span class="na">href=</span><span class="s">"#carouselExampleControls"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"next"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"carousel-control-next-icon"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Next<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>

  <h3 id="with-indicators">包含姿态指示器</h3>
  <p>也可以将当前所在幻灯片状态指示器添加到轮播效果控件中：</p>
  
  
<div class="bd-example">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect fill="#777" width="100%" height="100%" /><text fill="#555" dy=".3em" x="50%" y="50%">First slide</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect fill="#666" width="100%" height="100%" /><text fill="#444" dy=".3em" x="50%" y="50%">Second slide</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect fill="#555" width="100%" height="100%" /><text fill="#333" dy=".3em" x="50%" y="50%">Third slide</text></svg>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"carouselExampleIndicators"</span> <span class="na">class=</span><span class="s">"carousel slide"</span> <span class="na">data-ride=</span><span class="s">"carousel"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"carousel-indicators"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">data-target=</span><span class="s">"#carouselExampleIndicators"</span> <span class="na">data-slide-to=</span><span class="s">"0"</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">&gt;&lt;/li&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">data-target=</span><span class="s">"#carouselExampleIndicators"</span> <span class="na">data-slide-to=</span><span class="s">"1"</span><span class="nt">&gt;&lt;/li&gt;</span>
    <span class="nt">&lt;li</span> <span class="na">data-target=</span><span class="s">"#carouselExampleIndicators"</span> <span class="na">data-slide-to=</span><span class="s">"2"</span><span class="nt">&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;/ol&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-inner"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-item active"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://code.z01.com/img/2016instbg_01.jpg"</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://code.z01.com/img/2016instbg_02.jpg"</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://code.z01.com/img/2016instbg_03.jpg"</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"carousel-control-prev"</span> <span class="na">href=</span><span class="s">"#carouselExampleIndicators"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"prev"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"carousel-control-prev-icon"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Previous<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"carousel-control-next"</span> <span class="na">href=</span><span class="s">"#carouselExampleIndicators"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"next"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"carousel-control-next-icon"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Next<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>

  <div class="bd-callout bd-callout-warning">
    <h4 id="initial-active-element-required">需要定义有效的初始状态元素</h4>
    <p>将 <code class="highlighter-rouge">.active</code> 样式添加到其中一个幻灯片（一般第一张），否则轮播效果将无法正常运行（展现）。</p>
  </div>
  <h3 id="with-captions">包含字幕的轮播</h3>
  <p>在 <code class="highlighter-rouge">.carousel-item</code> 中使用 <code class="highlighter-rouge">.carousel-caption</code> 添加字幕到您的轮播控件中，如果是输小的浏览器viewport上，会自动隐藏（隐藏文字呈现主图片轮播），引用的是<code class="highlighter-rouge">.d-none</code>定义，一旦到了中型md浏览设备或屏幕则调用<code class="highlighter-rouge">.d-md-block</code>样式使之呈现。</p>
<div class="bd-example">
  <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleCaptions" data-slide-to="0" class=""></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="1" class=""></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="2" class="active"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item">
        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect fill="#777" width="100%" height="100%"></rect><text fill="#555" dy=".3em" x="50%" y="50%">First slide</text></svg>
        <div class="carousel-caption d-none d-md-block">
          <h5>First slide label</h5>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </div>
      </div>
      <div class="carousel-item">
        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect fill="#666" width="100%" height="100%"></rect><text fill="#444" dy=".3em" x="50%" y="50%">Second slide</text></svg>
        <div class="carousel-caption d-none d-md-block">
          <h5>Second slide label</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
      <div class="carousel-item active">
        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect fill="#555" width="100%" height="100%"></rect><text fill="#333" dy=".3em" x="50%" y="50%">Third slide</text></svg>
        <div class="carousel-caption d-none d-md-block">
          <h5>Third slide label</h5>
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"bd-example"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"carouselExampleCaptions"</span> <span class="na">class=</span><span class="s">"carousel slide"</span> <span class="na">data-ride=</span><span class="s">"carousel"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"carousel-indicators"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;li</span> <span class="na">data-target=</span><span class="s">"#carouselExampleCaptions"</span> <span class="na">data-slide-to=</span><span class="s">"0"</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">&gt;&lt;/li&gt;</span>
      <span class="nt">&lt;li</span> <span class="na">data-target=</span><span class="s">"#carouselExampleCaptions"</span> <span class="na">data-slide-to=</span><span class="s">"1"</span><span class="nt">&gt;&lt;/li&gt;</span>
      <span class="nt">&lt;li</span> <span class="na">data-target=</span><span class="s">"#carouselExampleCaptions"</span> <span class="na">data-slide-to=</span><span class="s">"2"</span><span class="nt">&gt;&lt;/li&gt;</span>
    <span class="nt">&lt;/ol&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-inner"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-item active"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://code.z01.com/img/2016instbg_01.jpg"</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-caption d-none d-md-block"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;h5&gt;</span>First slide label<span class="nt">&lt;/h5&gt;</span>
          <span class="nt">&lt;p&gt;</span>Nulla vitae elit libero, a pharetra augue mollis interdum.<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://code.z01.com/img/2016instbg_02.jpg"</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-caption d-none d-md-block"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;h5&gt;</span>Second slide label<span class="nt">&lt;/h5&gt;</span>
          <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://code.z01.com/img/2016instbg_03.jpg"</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-caption d-none d-md-block"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;h5&gt;</span>Third slide label<span class="nt">&lt;/h5&gt;</span>
          <span class="nt">&lt;p&gt;</span>Praesent commodo cursus magna, vel scelerisque nisl consectetur.<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"carousel-control-prev"</span> <span class="na">href=</span><span class="s">"#carouselExampleCaptions"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"prev"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"carousel-control-prev-icon"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;&lt;/span&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Previous<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"carousel-control-next"</span> <span class="na">href=</span><span class="s">"#carouselExampleCaptions"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"next"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"carousel-control-next-icon"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;&lt;/span&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Next<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
  
  <h3 id="crossfade"><span class="bd-content-title">交替变化<a class="anchorjs-link " href="#crossfade" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></span></h3>
  <p>加上 <code class="highlighter-rouge">.carousel-fade</code> 到你的滑动里，使交替变化代替滑动.</p>
  <div class="bd-example">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect fill="#777" width="100%" height="100%"></rect><text fill="#555" dy=".3em" x="50%" y="50%">First slide</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect fill="#666" width="100%" height="100%"></rect><text fill="#444" dy=".3em" x="50%" y="50%">Second slide</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect fill="#555" width="100%" height="100%"></rect><text fill="#333" dy=".3em" x="50%" y="50%">Third slide</text></svg>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>
<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"carouselExampleFade"</span> <span class="na">class=</span><span class="s">"carousel slide carousel-fade"</span> <span class="na">data-ride=</span><span class="s">"carousel"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-inner"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-item active"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://code.z01.com/img/2016instbg_01.jpg"</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://code.z01.com/img/2016instbg_02.jpg"</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://code.z01.com/img/2016instbg_03.jpg"</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"carousel-control-prev"</span> <span class="na">href=</span><span class="s">"#carouselExampleFade"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"prev"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"carousel-control-prev-icon"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Previous<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"carousel-control-next"</span> <span class="na">href=</span><span class="s">"#carouselExampleFade"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"next"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"carousel-control-next-icon"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Next<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>

<h3 id="individual-carousel-item-interval"><span class="bd-content-title">单个 <code class="highlighter-rouge">.carousel-item</code>间隔<a class="anchorjs-link " href="#individual-carousel-item-interval" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></span></h3>
<p>加上 <code class="highlighter-rouge">data-interval=""</code> 到一个 <code class="highlighter-rouge">.carousel-item</code> 更改自动循环到下一项之间的延迟时间.</p>
<div class="bd-example">
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect fill="#777" width="100%" height="100%"></rect><text fill="#555" dy=".3em" x="50%" y="50%">First slide</text></svg>
    </div>
    <div class="carousel-item" data-interval="2000">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect fill="#666" width="100%" height="100%"></rect><text fill="#444" dy=".3em" x="50%" y="50%">Second slide</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect fill="#555" width="100%" height="100%"></rect><text fill="#333" dy=".3em" x="50%" y="50%">Third slide</text></svg>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>
<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"carouselExampleInterval"</span> <span class="na">class=</span><span class="s">"carousel slide"</span> <span class="na">data-ride=</span><span class="s">"carousel"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-inner"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-item active"</span> <span class="na">data-interval=</span><span class="s">"10000"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://code.z01.com/img/2016instbg_01.jpg"</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-item"</span> <span class="na">data-interval=</span><span class="s">"2000"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://code.z01.com/img/2016instbg_02.jpg"</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://code.z01.com/img/2016instbg_03.jpg"</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"carousel-control-prev"</span> <span class="na">href=</span><span class="s">"#carouselExampleInterval"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"prev"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"carousel-control-prev-icon"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Previous<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"carousel-control-next"</span> <span class="na">href=</span><span class="s">"#carouselExampleInterval"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"next"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"carousel-control-next-icon"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Next<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
  
  <h2 id="usage">用法</h2>
  <h3 id="via-data-attributes">通过数据属性</h3>
  <p> 使用数据属性可以轻松控制转盘的位置。<code class="highlighter-rouge">data-slide</code>接受关键字， <code class="highlighter-rouge">prev</code>或者 <code class="highlighter-rouge">next</code>改变相对于其当前位置的滑动位置。或者，使用<code class="highlighter-rouge">data-slide-to</code>将原始幻灯片索引传递到<code class="highlighter-rouge">data-slide-to="2"</code>，将幻灯片位置转换到以0开始的特定索引。</p>
  <p>该<code class="highlighter-rouge">data-ride="carousel"</code> 属性用于将轮播标记为从页面加载开始的动画，它<strong>不能与同一转盘的（冗余和不必要）显式JavaScript初始化结合使用</strong>。</p>
  <h3 id="via-javascript">通过JavaScript</h3>
  <p>通过下面方法使用JS控制轮播(实现自动滚动)：</p>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.carousel'</span><span class="p">).</span><span class="nx">carousel</span><span class="p">()</span></code></pre>
  </figure>
  <h3 id="options">选项</h3>
  <p>
  可以通过<code class="highlighter-rouge">data-</code>方法，定义此轮播组件的属性，方法是<code class="highlighter-rouge">data-interval=""</code>，实现JavaScript属性的注入，订制此组件的各种形态。</p>
  <table class="table table-bordered table-striped table-responsive">
    <thead>
      <tr>
        <th style="width: 100px;">名称</th>
        <th style="width: 50px;">Type类型</th>
        <th style="width: 50px;">默认值</th>
        <th>描述</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>interval</td>
        <td>number</td>
        <td>5000</td>
        <td>自动循环项目之间的延迟时间（即滚动时间），如果为false，则整个轮播组件不会自动滚动（仅支持手动滚动）-在调试CSS样式时这很实用。</td>
      </tr>
      <tr>
        <td>keyboard</td>
        <td>boolean</td>
        <td>true</td>
        <td>是否应对键盘事件作出反应，如果选择true则可以通过键盘上的左<kbd>&lt;-</kbd>右<kbd>-&gt;</kbd>方向键进行切换控制。</td>
      </tr>
      <tr>
        <td>pause</td>
        <td>string | boolean</td>
        <td>"hover"</td>
        <td><p>
		如果设置为<code>"hover"</code>, 则鼠标移在动画屏幕上暂停旋转，并在移开鼠标后恢复旋转事件（这是默认属性）；如设置为<code>false</code>,则鼠标移上去轮播动画不会暂停。</p>
          <p>在触摸屏幕上，当设置为<code>"hover"</code>属性时，循环将在触控时暂停（一旦用户完成与旋转事件的交互）两个时间间隔自动恢复。 请注意，这是上述鼠标行为的补充。</p></td>
      </tr>	  
      <tr>
        <td>ride</td>
        <td>string</td>
        <td>false</td>
        <td>在用户手动循环第一个项目后自动播放传送带， 如果“carousel”则加载时自动播放传送带。</td>
      </tr>
      <tr>
        <td>wrap</td>
        <td>boolean</td>
        <td>true</td>
        <td>转盘是否应该连续循环或难以停止。</td>
      </tr>
    </tbody>
  </table>
  <h3 id="methods">方法</h3>
  <div class="bd-callout bd-callout-danger">
    <h4 id="asynchronous-methods-and-transitions">异步传输和转换</h4>
    <p>所有API都支持 <strong>异步传输</strong> 和<strong>轮换</strong>。一旦转换事件发生（开始），直到 <strong>事件结束之前</strong>不会结束。另外，在 <strong>过渡组件上的方法将被忽略</strong>。</p>
    <p>请参阅<a href="../docs/javascript/">我们的API文档</a>了解更多。</p>
  </div>
  <h4 id="carouseloptions"><code class="highlighter-rouge">.carousel(options)</code></h4>
  <p>通过 <code class="highlighter-rouge">object</code> 初始化，启动并执行轮播。</p>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.carousel'</span><span class="p">).</span><span class="nx">carousel</span><span class="p">({</span>
  <span class="na">interval</span><span class="p">:</span> <span class="mi">2000</span>
<span class="p">})</span></code></pre>
  </figure>
  <h4 id="carouselcycle"><code class="highlighter-rouge">.carousel('cycle')</code></h4>
  <p>从左到右循环播放。</p>
  <h4 id="carouselpause"><code class="highlighter-rouge">.carousel('pause')</code></h4>
  <p>通过事件停止幻灯片播放。</p>
  <h4 id="carouselnumber"><code class="highlighter-rouge">.carousel(number)</code></h4>
  <p>将轮播循环到特定的帧（基于0，类似数组），在 <strong>目标被显示之前</strong>回传给调用用者 (即 <code class="highlighter-rouge">slid.bs.carousel</code> 事件之前)。</p>
  <h4 id="carouselprev"><code class="highlighter-rouge">.carousel('prev')</code></h4>
  <p>将轮播指向前一帧幻灯片，<strong>在前一个目标被显示之前</strong>回传给调用者 (即 <code class="highlighter-rouge">slid.bs.carousel</code> 事件之前)。</p>
  <h4 id="carouselnext"><code class="highlighter-rouge">.carousel('next')</code></h4>
  <p>将轮播指向后一帧幻灯片，<strong>在前一个目标被显示之前</strong>回传给调用者 (即 <code class="highlighter-rouge">slid.bs.carousel</code> 事件之前)。</p></p>
  <h3 id="carouseldispose"><code class="highlighter-rouge">.carousel('dispose')</code></h3>
  <p>销毁一个轮播的控件。</p>
  <h3 id="events">事件</h3>
  <p>Bootstrap提供了两下事件给轮播控件使用，这两个事件都具有以下附加属性：</p>
  <ul>
    <li><code class="highlighter-rouge">direction</code>: 轮播滚动的方向 ( <code class="highlighter-rouge">"left"</code> 或 <code class="highlighter-rouge">"right"</code>)。</li>
    <li><code class="highlighter-rouge">relatedTarget</code>: 作为活动项目滑动到指定的DOM元素。</li>
    <li><code class="highlighter-rouge">from</code>: 当前项目的项目的索引。</li>
    <li><code class="highlighter-rouge">to</code>:下一个项目的索引。</li>
  </ul>
  <p>所有的轮播事件都在轮播本身 (即 <code class="highlighter-rouge">&lt;div class="carousel"&gt;</code>)下被触发。</p>
  <table class="table table-bordered table-striped table-responsive">
    <thead>
      <tr>
        <th style="width: 150px;">事件类型Event Type</th>
        <th>描述</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>slide.bs.carousel</td>
        <td>当用 <code>slide</code>方法时，此事件会立即触发。</td>
      </tr>
      <tr>
        <td>slid.bs.carousel</td>
        <td>轮播完成切换后，此事件即被触发。</td>
      </tr>
    </tbody>
  </table>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myCarousel'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'slide.bs.carousel'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
  <span class="c1">// do something…</span>
<span class="p">})</span></code></pre>
  </figure>
  <h3 id="change-transition-duration">更改转换时间</h3>
  <p>如果使用编译的CSS，则可以在编译或自定义样式之前<code>.carousel-item</code>使用<code>$carousel-transitionSass</code>变量更改过渡时间。如果应用了多个转换，请确保首先定义转换转换（例如<code>transition: transform 2s ease, opacity .5s ease-out</code>）。</p>
</main>
</div>
</div>

<script src="../js/jquery-3.2.1.slim.min.js"></script> 
<script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery-slim.min.js"><\/script>')</script> 
<script src="../dist/js/popper.min.js"></script> 
<script src="../dist/js/bootstrap.min.js"></script> 
<script src="../assets/js/docs.min.js"></script> 
<script src="../assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../assets/js/docsearch.min.js"></script> 
 

</body>
</html>
